<template>
  <div class="bui-notification pay-success">
    <div class="notification-header ui-flex flex--vcenter flex--space-between">
      <div class="notification-header--title ui-txt txt-subhead">{{title}}</div>
      <div
        class="notification-header--time ui-txt txt-caption"
      >{{publishTime | date_format('M月D日')}}</div>
    </div>
    <div class="notification-body">
      <div class="notification-box ui-flex">
        <div class="notification-showimage">
          <image class="notification-showimage--image" :src="showImage" />
        </div>
        <div class="notification-content">{{content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import notificeMixins from "./mixins";
export default {
  name: "notification-success",
  mixins: [notificeMixins],
  props: {
    showImage: String
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.bui-notification.pay-success {
  margin: 0 30rpx;
  background-color: #fff;
  margin-top: 30rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  .notification-header {
    padding: 26rpx 20rpx 20rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    .notification-header--title {
      color: $color-text-base;
    }
  }
  .notification-body {
    background-color: #fff;
    padding: 0 20rpx 20rpx;
  }
  .notification-box {
    background-color: $fill-grey;
    border-radius: 16rpx;
    align-items: flex-start;
    .notification-showimage {
      flex: 0 0 100rpx;
      .notification-showimage--image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 16rpx;
      }
    }
    .notification-content {
      flex: 1;
      padding: 10rpx 20rpx;

      font-size: $font-size-base;
      line-height: 1.4;
    }
  }
}
</style>
